<template>
  <div class="home">
    <!-- 头部 -->
    <div class="header">
      <img :src="require('../imgs/logo1.png')" alt="" />
      <div class="text">欢迎回来，陈**先生</div>
    </div>
    <!-- 内容 -->
    <div class="content">
      <template v-if="active == 0">
        <div>
          <img :src="require('../imgs/index.png')" alt="" />
        </div>
      </template>
      <template v-if="active == 1">
        <div>
          <img :src="require('../imgs/hangqing.jpg')" alt="" />
        </div>
      </template>
      <template v-if="active == 2">
        <div>
          <img :src="require('../imgs/mine.jpg')" alt="" />
          <span
            class="sum"
            :class="{ red: sum > 0, green: sum < 0, grey: sum == 0 }"
            >{{ formatAmount(sum) }}</span
          >
          <span
            class="cash"
            :class="{ red: cash > 0, green: cash < 0, grey: cash == 0 }"
            >{{ formatAmount(cash) }}</span
          >
          <span
            class="gupiao"
            :class="{ red: gupiao > 0, green: gupiao < 0, grey: gupiao == 0 }"
            >{{ formatAmount(gupiao) }}</span
          >
          <span
            class="jinri"
            :class="{ red: jinri > 0, green: jinri < 0, grey: jinri == 0 }"
            >{{ jinri > 0 ? " + " : jinri < 0 ? " - " : ""
            }}{{ formatAmount(jinri) }}</span
          >
          <span
            class="zuori"
            :class="{ red: zuori > 0, green: zuori < 0, grey: zuori == 0 }"
            >{{ zuori > 0 ? " + " : zuori < 0 ? " - " : ""
            }}{{ formatAmount(zuori) }}</span
          >
          <span class="keyong red">{{ formatAmount(keyong) }}</span>
          <span class="kequ red">{{ formatAmount(kequ) }}</span>
        </div>
      </template>
    </div>
    <!-- 底部导航栏 -->
    <div class="footer">
      <van-tabbar
        :fixed="false"
        v-model="active"
        :active-color="'#da251c'"
        :inactive-color="'#aaa'"
      >
        <van-tabbar-item icon="wap-home">首页</van-tabbar-item>
        <van-tabbar-item icon="gold-coin">行情</van-tabbar-item>
        <van-tabbar-item icon="manager">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  data() {
    return {
      active: 2,
      sum: "",
      cash: "",
      zuori: "",
      jinri: "",
      keyong: "",
      kequ: "",
      timer: null,
    };
  },
  computed: {
    gupiao() {
      if (this.sum) {
        return (this.sum - this.cash).toFixed(2) - 0;
      } else {
        return "";
      }
    },
  },
  created() {},
  watch: {
    active: {
      handler(val) {
        if (val == 2) {
          this.initData();
          this.$nextTick(() => {
            if (this.isMarketOpen()) {
              this.start();
            }
          });
        } else {
          clearTimeout(this.timer);
          this.timer = null;
        }
      },
      immediate: true,
    },
  },
  methods: {
    initData() {
      this.sum = this.getRandomArbitrary(1680000, 1780000).toFixed(2) - 0;
      this.cash = 160285.16;
      this.keyong = 160285.16;
      this.kequ = 160285.16;
      let flag = Math.random() > 0.5;
      this.zuori =
        new Date().getDay() == 0
          ? (0.0).toFixed(2) - 0
          : flag
          ? this.getRandomArbitrary(20000, 40000).toFixed(2) - 0
          : this.getRandomArbitrary(-40000, -20000).toFixed(2) - 0;
      this.jinri =
        new Date().getDay() == 0 || new Date().getDay() == 6
          ? (0.0).toFixed(2) - 0
          : flag
          ? this.getRandomArbitrary(-40000, -20000).toFixed(2) - 0
          : this.getRandomArbitrary(20000, 40000).toFixed(2) - 0;
    },
    start() {
      this.run();
    },
    run() {
      clearTimeout(this.timer);
      this.timer = null;
      this.timer = setTimeout(() => {
        const randomNum = this.getRandomArbitrary(-1500, 1500).toFixed(2) - 0;
        this.sum = (Number(this.sum) + randomNum).toFixed(2) - 0;
        this.jinri = (Number(this.jinri) + randomNum).toFixed(2) - 0;
        this.run();
      }, [2000, 2800][parseInt(Math.random() * 2)]);
    },
    isMarketOpen() {
      const Open1 = new Date(Date.now()).setHours(9, 30, 0, 0);
      const Close1 = new Date(Date.now()).setHours(11, 30, 0, 0);
      const Open2 = new Date(Date.now()).setHours(13, 0, 0, 0);
      const Close2 = new Date(Date.now()).setHours(15, 0, 0, 0);
      const currentTime = new Date();
      return (
        new Date().getDay() > 0 &&
        new Date().getDay() < 6 &&
        ((currentTime >= Open1 && currentTime <= Close1) ||
          (currentTime >= Open2 && currentTime <= Close2))
      );
    },
    getRandomArbitrary(min, max) {
      return Math.random() * (max - min) + min - 0;
    },
    formatAmount(number) {
      // 使用正则表达式将数字转换为金额格式，保留两位小数
      return number
        .toFixed(2)
        .replace(/\d(?=(\d{3})+\.)/g, "$&,")
        .replace("-", "");
    },
  },
  beforeDestroy() {
    clearTimeout(this.timer);
    this.timer = null;
  },
};
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
img {
  display: block;
}
.home {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;

  .header {
    // height: 100px;
    background: #da251c;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 26px;
    color: white;
    .text {
      font-size: 32px;
    }
    img {
      width: 26vw;
    }
  }
  .content {
    flex: 1;
    display: block;
    position: relative;
    overflow-y: auto;
    img {
      width: 100%;
    }
    .red {
      color: #da251c;
    }
    .green {
      color: #0aab62;
    }
    .grey {
      color: #ccc;
    }
    span {
      position: absolute;
    }
    .sum {
      top: 130px;
      font-size: 58px;
      left: 60px;
      font-weight: bold;
    }
    .cash {
      top: 363px;
      font-size: 44px;
      right: 316px;
      font-weight: bold;
    }
    .gupiao {
      top: 502px;
      font-size: 44px;
      right: 316px;
      font-weight: bold;
    }
    .zuori {
      top: 372px;
      font-size: 33px;
      right: 66px;
      font-weight: bold;
    }
    .jinri {
      top: 508px;
      font-size: 33px;
      right: 66px;
      font-weight: bold;
    }
    .keyong {
      top: 1146px;
      font-size: 33px;
      left: 59px;
      font-weight: bold;
    }
    .kequ {
      top: 1146px;
      font-size: 33px;
      left: 423px;
      font-weight: bold;
    }
  }
  .footer {
    background: #fff;
    .van-tabbar {
      height: 100px;
      .van-tabbar-item__icon {
        font-size: 36px;
      }
      .van-tabbar-item__text {
        font-size: 22px;
      }
    }
  }
}
</style>
